<template>
  <div id="maintain">
    <img src="../common/imgs/maintaina.png" alt="" class="img1">
    <img src="../common/imgs/maintainb.png" class="width100 img2" style="" alt="">
    <div class="content">
      <div class="inner">
        <p class="border"><img src="../common/imgs/maintainborder.png" alt=""></p>
        <p class="title">系统正在升级维护中,期间暂停服务</p>
        <div class="html">
          <p class="html-title">预计更新时间</p>
          <p class="time">{{start_time}}-{{end_time}}</p>
          <p class="html-title newContent">更新内容</p>
          <p class="getHtml" v-html="html"></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { machineList } from '../http/api';
  export default {
    name:'mainTain',
    introduce : '系统维护',
    data(){
      return{
        start_time : null,
        end_time : null,
        html : null
      }
    },
    mounted() {
      machineList({noToast : true}).then( res =>{
        if( res.code == 505 ){
          let data = res.data.notice;
          this.start_time = data.start_time;
          this.end_time = data.end_time;
          this.html = data.content;
        }
      })
    }
  }
</script>
<style type="text/less" lang="less" scoped>
  #maintain{
    height: 100%;width: 100%;position: absolute;z-index: 10;left: 0;top:0;font-size: 0;min-height: 100%;
    >.img1{
      width: 100%;height: 3.85rem;
    }
    >.img2{
      height: 9rem;min-height: calc( 100% - 3.85rem );
    }
    >.content{
      position: absolute;z-index: 1;top:3.8rem;left: 0rem;width: 100%;padding:0 0.42rem;
      .inner{
        border-radius: 0.08rem;background: #fff;height: 8rem;position: relative;overflow: hidden;
        .border>img{
          height: 0.12rem;width: 100%;
        }
        .title{
          color: #D5620F;font-size: 0.36rem;text-align: center;font-family: 'PingFang-SC-Bold';line-height: 1.3rem;
        }
        .html{
          height: calc( 100% - 1.6rem );overflow-y: scroll;padding: 0 0.4rem;
          .html-title{
            height: 0.42rem;line-height: 0.42rem;font-size: 0.32rem;color: #000;position: relative;padding-left: 0.42rem;
          }
          .html-title:before{
            content: '';display: block;position: absolute;z-index: 1;left: 0;top:0;background: url("../common/imgs/min_title.png") center center no-repeat;
            height: 0.42rem;width: 0.3rem;background-size: 0.28rem 0.28rem;
          }
          .newContent{
            margin-top: 0.3rem;
          }
          .time{
            color: #595959;padding: 0.32rem 0;font-size: 0.26rem;
          }
          .getHtml{
            font-size: 0.25rem;color: #222222;padding-top: 0.32rem;line-height: 200%;
          }
          .getHtml /deep/ *{
            box-sizing: initial;
          }
        }
        .html::-webkit-scrollbar {width:2px; height:2px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        .html::-webkit-scrollbar-track {background-color: rgba(0,0,0,0.2); border-radius:0px; -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.0);} /*定义滚动条轨道 内阴影+圆角*/
        .html::-webkit-scrollbar-thumb {background-color: #ffd203; border-radius:0px; -webkit-box-shadow:inset 0 0 2px #ffd203;} /*定义滑块 内阴影+圆角*/

      }
    }
  }
  /*#maintain::-webkit-scrollbar {width:0px; height:0px; background-color:transparent;} !*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*!*/
  /*#maintain::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 0px rgba(0,0,0,0);} !*定义滚动条轨道 内阴影+圆角*!*/
  /*#maintain::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 0px rgba(0,0,0,0);} !*定义滑块 内阴影+圆角*!*/
  @media screen and ( min-width: 1025px){
    #maintain{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }
</style>
